<template>
  <div class="component-score-order-growth-score-expire-config distribution-recruit-set gray-box top-redius border-bottom-gray">
    <div class="title">
      {{ $t('user.pointsExpirationSetting') }}
    </div>
    <!-- native modifier has been removed, please confirm whether the function has been affected  -->
    <el-form
      ref="dataFormRef"
      label-width="auto"
      class="set-form"
      label-position="left"
      :rules="dataRule"
      :model="dataForm"
      @submit.prevent
    >
      <el-form-item
        :label="$t('user.expirationSwitch')"
        style="width:440px"
        prop="scoreExpireSwitch"
      >
        <el-switch v-model="dataForm.scoreExpireSwitch" />
      </el-form-item>
      <el-form-item
        v-if="dataForm.scoreExpireSwitch"
        :label="$t('user.expiration')"
        prop="expireYear"
      >
        <!-- <tiny-mce v-model="dataForm.expire"
        style="width:900px"></tiny-mce>-->
        <el-input-number
          v-model="dataForm.expireYear"
          autosize
          width="330"
          :min="1"
          :max="100000000"
          @change="onExpireYearChange"
        />
        <span>{{ $t('user.year') }}</span>
        <br>
        <span style="color:gray;">{{ $t('user.expirationDes') }}</span>
        <span style="color:gray;">{{ $t('user.expirationDes1') }}</span>
      </el-form-item>
    </el-form>
    <div
      class="default-btn"
      @click="onSubmit()"
    >
      {{ $t('sysManagement.save') }}
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const dataForm = ref({
  expireYear: 1,
  scoreExpireSwitch: false
})
const dataRule = {
  expireYear: [
    { required: true, message: $t('user.enterExpiration'), trigger: 'brue' }
  ]
}
onMounted(() => {
  getData()
})

const onExpireYearChange = (e) => {
  if (String(e).length > 8) dataForm.value.expireYear = 1
}
// 获取数据
const getData = () => {
  http({
    url: http.adornUrl('/user/scoreExpire/info/' + 'SCORE_EXPIRE'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    if (data != null && data !== '') {
      dataForm.value = data
    }
  })
  // $refs['dataForm'].resetFields()
}

// 提交表单
const dataFormRef = ref(null)
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      http({
        url: http.adornUrl('/user/scoreExpire'),
        method: 'post',
        data: http.adornData({
          paramKey: 'SCORE_EXPIRE',
          expireYear: dataForm.value.expireYear,
          scoreExpireSwitch: dataForm.value.scoreExpireSwitch,
          remark: $t('user.expirationConfiguration')
        })
      }).then(() => {
        getData()
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      }).catch(() => {

      })
    }
  })
}

</script>
<style lang="scss" scoped>
.component-score-order-growth-score-expire-config{
  :deep(.distribution-withdraw-cash-set) {
  .input-tips {
    font-size: 12px;
  }
}
}

</style>
